<template>
  <div>
    <router-link to="/operation">
      <el-button type="success">add</el-button>
    </router-link>
      <el-button type="warning" @click="update">update</el-button>
      <el-button type="danger" @click="del">del</el-button>
      <el-button type="info" @click="find">find</el-button>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="name"
              label="姓名"
              width="120">
      </el-table-column>
      <el-table-column
              prop="age"
              label="年龄"
              show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

  export default {
      name: 'Home',
      created () {
          this.$axios({
              method:'get',
              url:'http://localhost:8888/sbdemo/test/fAll',
          }).then((res)=>{
            this.tableData = res.data;
          }).catch((res)=>{
            alert('请求出现异常')
          })
      },
      data() {
          return {
              tableData: [],
              multipleSelection: [],
              ids:''
          }
      },
      methods: {
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          del() {
              if(this.multipleSelection.length <= 0){
                  alert('还没有选中呢！')
              }else {
                  var ids = '';
                  this.multipleSelection.forEach(item => {
                      ids = ids + item.id + ',';
                  });
                  //ids发送给服务器
//                  alert(ids)
                  this.$axios({
                      method:'get',
                      url:'http://localhost:8888/sbdemo/test/del?ids=' + ids,
                  }).then((res)=>{
                      alert('sucess');
                      this.$router.go(0)
                  }).catch((res)=>{
                      alert('请求出现异常')
                  })
              }
          },
          update() {
              if(this.multipleSelection.length > 1 || this.multipleSelection.length == 0){
                  alert('只能选中一个')
              }else if (this.multipleSelection.length == 1){
                  this.$router.push({path:'/operation',query:{
                      id:this.multipleSelection[0].id,
                      type:0
                  }});
              }
          },
          find(){
              if(this.multipleSelection.length > 1 || this.multipleSelection.length == 0){
                  alert('只能选中一个')
              }else if (this.multipleSelection.length == 1){
                  this.$router.push({path:'/operation',query:{
                      id:this.multipleSelection[0].id,
                      type:1
                  }});
              }
          }
      }
  }
</script>

